<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
</head>

<body>
  <!-- <div class="box">hello</div> -->
  <div id="app"></div>
  <script>
    // react 是什么？js框架的一种 。facebook 的框架 ；是视图层的一种表现 。 view
    // 1.虚拟dom  2.diff算法 ；
    // let box = document.querySelector(".box");
    // console.dir(box)

    // 一、使用react 创建虚拟dom 
    // 1.引入react的核心库 ，就是react中的核心函数 2.引入一个 react 操作dom的库，这个主要用于react的dom渲染操作；
    // react提供一个 React变量用于创建虚拟dom
    // document.createElement();
    // React.ceateElement(虚拟dom的名称，虚拟dom的属性，虚拟dom的子节点)
    // let vdom = React.createElement("h1",{id:"myid"},"我是h1标题");
    // let myspan = React.createElement("span",null,"我是span");
    // let mydiv = React.createElement("div",null,vdom,myspan);
    // console.log(mydiv);

    // 二、把虚拟dom转成真实的dom结构；
    // let root = document.querySelector("#app");
    // renderDom(vdom);
    // function renderDom(vdom){
    //     let ele = document.createElement(vdom.type);
    //     ele.setAttribute("id",vdom.props.id);
    //     ele.innerHTML = vdom.props.children;
    //     root.appendChild(ele);
    // }

    // 三、利用 react-dom把虚拟dom渲染成真实的dom
    // 1.把虚拟dom渲染到什么位置 ？ #app里面  2. 调用react-dom中的函数进行渲染；
    // let root = ReactDOM.createRoot(document.querySelector("#app"));  // 虚拟dom需要渲染的位置
    // // 调用render函数渲染虚拟dom
    // root.render(mydiv);



    // 练习 ： 创建一个 ul 和 li  渲染数据  arr = [{name:"张三",age:20}，{name:"张三2",age:21}，{name:"张三3",age:25}];
    // 显示姓名和年龄

    let arr = [{ name: "张三", age: 20 }, { name: "张三2", age: 21 }, { name: "张三3", age: 25 }];
    let res = arr.map(item => React.createElement("li", null, `姓名是${item.name};年龄是${item.age}`));
    // console.log(res);
    let vul = React.createElement("ul", null, ...res);
    let root = ReactDOM.createRoot(document.querySelector("#app"));
    root.render(vul);




  </script>
</body>

</html>